<template>
	<view class="">
		<view class="" v-if="recordList.length > 0">
			<uni-card v-for="(item,index) in recordList" :key="index">
				<view class="record">
					<view class="record-address">
						故障代码：{{item.faultCode}}
						<!-- <text>{{item.intervalTime}}</text> -->
					</view>
						<view class="information-left">
							<view class="record-time">
								<view>电梯品牌:</view>
								<view>{{item.brandName}}</view>
							</view>
							<view class="record-time">
								<view>电梯型号:</view>
								<view>{{item.modelName}}</view>
							</view>
							<view class="record-time">
								<view>描述:</view>
								<view>{{item.faultDescribe}}</view>
							</view>
							<view class="record-time">
								<view>可能原因:</view>
								<view>{{item.possibleCauses}}</view>
							</view>	
							<view class="record-time">
								<view>故障状态:</view>
								<view>{{item.elevatorStatus}}</view>
							</view>	
							
						</view>
		
				</view>
			</uni-card>
		</view>
		<view class="" v-else>
			
				<null-page ></null-page>
		</view>
	</view>
	
	
</template>

<script>
	import nullPage from '@/common/null.vue'
	import fault from "@/serve/api/fault.js";
	export default {
		components:{
			nullPage
		},
		data() {
			return {
				// 内容
				recordList: [],
				brandId:"",
				modelId:"",
				faultCode:"",
				getListFlag:true,
				pageNum:1,
			}
		},
		
		onLoad(e) {
			Object.keys(e).forEach(item =>{this[item] = e[item]})
			this.getRecord() 
		},
		methods: {
			async getRecord(flag){
				if(flag){
					this.pageNum = 1;
					this.getListFlag = true
				}
				const res = await fault.selectFaultCode({
					brandId:this.brandId,
					modelId:this.modelId,
					faultCode:this.faultCode,
					pageSize:10,
					pageNum:this.pageNum
				})
				
				if(res){
					if (res.data.data.list.length < 9) {
						this.getListFlag = false;
					}
					
					this.recordList.push(...res.data.data.list)
				}
			},
		},
		onReachBottom(e) {
			if (this.getListFlag) {
				this.pageNum = this.pageNum + 1;
				this.getByStatus(this.activeTab);
			}
		}
	}
</script>

<style scoped>
	.uni-card {
		width: 670rpx;
		/* height: 280rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border: none;
		line-height: 280rpx;
		text-align: left;
	}
	
	.record {
		font-family: PingFang SC;
		font-weight: 400;
		/* margin: 40rpx 0; */
	}
	
	.record-address {
		font-size: 30rpx;
		color: #34363D;
		display: flex;
		justify-content: space-between;
		font-weight: 400;
		margin-bottom: 30rpx;
	}
	


	
	
	.record-time {
		color: #989BA6;
		display: flex;
	}
	.record-time view:nth-child(1){
		width: 20%;
		font-size: 24rpx;
		flex-shrink: 0;
	}
	.record-time view:nth-child(2) {
		margin-left: 15rpx;
		font-size: 24rpx;
		color: #34363D;
		word-spacing: 15rpx;
		letter-spacing: 1rpx;
	}
	
	.successState{
		background: #65D0D5;
		width: 150rpx;
		height: 60rpx;
		text-align: center;
		box-shadow: 0px 5px 10px 0px rgba(58, 194, 17, 0.2);
		border-radius: 28rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.successState image{
		
		width: 30rpx;
		height: 30rpx;
		background: #65D0D5;
		border-radius: 10rpx;
	
	}
</style>
